<template>
  <div class="patient-info" v-if="true">
    <div class="patient-info-inside">
      <div class="header">
        <div class="left item">
          <img alt="左侧" src="@/components/assets/images/design/1-12.webp" />
        </div>
        <div class="middle item">{{ comTitle }}</div>
        <div class="right item">
          <img alt="右侧" src="@/components/assets/images/design/1-12.webp" />
        </div>
      </div>
      <div class="patient-info-area">
        <div class="mobileNumberBox">{{ inputTitle }}{{ value }}</div>
        <van-number-keyboard
          :show="show"
          :hide-on-click-outside="false"
          extra-key="清空"
          @delete="delNumber"
          @input="addInput"
        />
        <div class="fontBtnBox">
          <div class="cancelBtn" @click="cancelBtn">取消</div>
          <div class="sureBtn" @click="sureBtn">确定</div>
        </div>
      </div>
      <van-dialog
        v-model="dialogShow"
        className="saveInputNumber"
        width="80%"
        show-cancel-button
        :overlay="false"
        @cancel="cancelNumberKeyboard"
        @confirm="saveNumberKeyboard"
      >
      <template #title>
        请
        <span style="color:red">
            再次确认
        </span>
          手机号是否正确！
      </template>
        <div class="box">
          <div v-for="(item,index) in value" :key="index" class="item">
            {{ item }}
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import { NumberKeyboard, Toast, Dialog } from "vant";
export default {
  name: "AddMobileNumber",

  componentName: "AddMobileNumber",
  components: {
    NumberKeyboard,
  },
  props: {
    comTitle: {
      type: String,
      default: "添加手机号",
    },
    inputTitle: {
      type: String,
      default: "手机号：",
    },
  },
  data() {
    return {
      show: true,
      dialogShow: false,
      value: "",
    };
  },

  computed: {
    patientInfo() {
      return this.$store.getters["DRCbiz/getPatientInfo"];
    },
  },

  methods: {
    saveNumberKeyboard() {
      console.log("确定");
      this.$emit('sureBtn',this.value)
    },
    cancelNumberKeyboard() {
      console.log("取消");
    },
    /**
     * @name 确定
     */
    sureBtn() {
      const phoneRegex = /^(?:\+86)?1[3-9]\d{9}$/;
      if (phoneRegex.test(this.value)) {
         this.dialogShow = true;
      } else {
        Toast({
          message: `请填入正确的手机号`,
          position: "bottom",
          type: "fail",
          forbidClick: true,
          duration: 3000,
        });
      }
    },
    /**
     * @name 取消
     */
    cancelBtn() {
      this.$emit("cancelBtn", this.value);
    },
    /**
     * @name 删除按钮
     */
    delNumber() {
      this.value = this.value.slice(0, -1);
    },
    /**
     * @name 按钮输入
     */
    addInput(value) {
      if (value === "清空") {
        this.value = "";
      } else {
        this.value += value;
      }
    },
    handleSure() {
      this.$emit("handlePatientInfoSure");
    },
  },
};
</script>

<style scoped lang="scss">
@import "./assets/style";
.saveInputNumber {
  padding: 20px;
  top: 62%;
  background-color: #ccc;
  .box {
    display: flex;
    justify-content: space-evenly;
    .item {
      padding: 10px 20px;
      border: 1px solid black;
      margin: 10px 5px;
    }
  }

  :deep(.van-dialog) {
    font-size: 50px;
  }
  :deep(.van-dialog__header) {
    font-size: 50px;
    line-height: 1;
  }
  :deep(.van-dialog__content) {
    font-size: 50px;
    padding: 30px 0;
  }
  :deep(.van-dialog__cancel) {
    font-size: 50px;
  }
  :deep(.van-dialog__confirm) {
    font-size: 50px;
  }
  :deep(.van-button--default){
    background-color: #ccc;
  }
}
</style>